/**
 * Created by hejg on 2018/5/21.
 */
import React, {Component} from 'react';
import {
    ScrollView,
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    TouchableHighlight
} from 'react-native';
import PropTypes from 'prop-types';
import Modal from "react-native-modal";
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';
import Ionicons from 'react-native-vector-icons/EvilIcons';
import Style from './Style';

export default class DropDown extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isVisible: false,
            selectedIndex: this.props.defaultIndex //返回参数
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            selectedIndex: nextProps.defaultIndex
        });
    }


    _cancelSelected() {
        this.setState({
            isVisible: false,
            selectedIndex: this.props.defaultIndex
        });
    }

    _confirmSelected() {
        this.setState({
            isVisible: false,
        });
        this.props.onConfirm(this.state.selectedIndex);
    }

    _touchItem(index) {
        this.setState({
            selectedIndex: index
        });
    }

    render() {
        return (
            <View>
                <TouchableOpacity onPress={() => this.setState({isVisible:true})}>
                    {
                        this.props.contentComponent ? this.props.contentComponent :
                            (
                                <View style={styles.DropDownView}>
                                    <View style={styles.DropDownTopView}>
                                        <Text style={{fontSize:Style.fontSize.small,color:this.props.color}}>
                                            {this.props.data && this.props.data.length > 0 ? this.props.data[this.props.defaultIndex][this.props.label] : '选择'}
                                        </Text>
                                    </View>
                                    <View style={[styles.DropDownBottomView,{backgroundColor:this.props.color}]}>
                                        <SimpleLineIcons name='arrow-down' size={10} color={Style.color.white}/>
                                    </View>
                                </View>
                            )
                    }
                </TouchableOpacity>
                <Modal isVisible={this.state.isVisible} style={{margin:0}}
                       onBackdropPress={() => this._cancelSelected()}>
                    <View style={{flex:1}}>
                        <View style={styles.DropDownModalView}>
                            <View style={styles.DropDownHeaderView}>
                                <TouchableOpacity onPress={() => this._cancelSelected()}>
                                    <Text style={{color:Style.color.gray,fontSize:Style.fontSize.normal}}>取消</Text>
                                </TouchableOpacity>
                                <Text
                                    style={{color:Style.color.black,fontSize:Style.fontSize.normal}}>{this.props.title}</Text>
                                <TouchableOpacity onPress={() => this._confirmSelected()}>
                                    <Text style={{color:this.props.color,fontSize:Style.fontSize.normal}}>确定</Text>
                                </TouchableOpacity>
                            </View>
                            <ScrollView>
                                <View >
                                    {this.props.data && this.props.data.map((item, index) => <DropDownItem
                                        label={item[this.props.label]}
                                        value={item[this.props.value]}
                                        selected={this.state.selectedIndex === index}
                                        color={this.props.color}
                                        index={index}
                                        onPress={(index) => this._touchItem(index)}
                                        key={item[this.props.value]}/>)}
                                </View>
                            </ScrollView>
                        </View>
                    </View>
                </Modal>
            </View>
        );
    }
}

class DropDownItem extends Component {
    _touchItem(index) {
        this.props.onPress(index);
    }

    render() {
        return (
            <TouchableHighlight underlayColor={Style.color.lightGray}
                                onPress={()=> this._touchItem(this.props.index)}>
                <View style={[styles.DropDownItemView,{backgroundColor: this.props.selected?'#dce6f2':'transparent'}]}>
                       <View style={{width:'10%'}}>
                           {this.props.selected ?<Ionicons name="check" size={20} color={this.props.color}/> : null}
                        </View>
                    <Text style={[styles.DropDownItemLabel,{color:this.props.selected?Style.color.blue:Style.color.gray}]}>{this.props.label}</Text>
                </View>
            </TouchableHighlight>
        );
    }
}

DropDown.propTypes = {
    defaultIndex: PropTypes.number,//默认选中的下标
    color: PropTypes.string,//主题色
    title: PropTypes.string,//显示标题
    data: PropTypes.array.isRequired,//数据列表{label:k,value:v}
    onConfirm: PropTypes.func.isRequired,//确认选中的触发事件
    contentComponent: PropTypes.node,//自定义触发控件
    label: PropTypes.string,//选项条目的显示属性
    value: PropTypes.string//详细条目的表达值属性
};

DropDown.defaultProps = {
    defaultIndex: 0, //使其默认选中第1条记录
    color: Style.color.heightBlue,//默认使用主题蓝色
    title: '请选择',//默认显示的提示信息
    label: 'label',//默认用于显示的属性存储变量
    value: 'value'//默认用于表达值的属性存储变量
};

const styles = StyleSheet.create({
    DropDownView: {
        marginHorizontal: 2, borderWidth: 1, borderColor: Style.color.lightGray
    },
    DropDownTopView: {
        paddingHorizontal: 8, paddingVertical: 3, backgroundColor: Style.color.white
    },
    DropDownBottomView: {
        alignItems: 'center', width: '100%', height: 10, borderBottomLeftRadius: 5, borderBottomRightRadius: 5
    },
    DropDownModalView: {
        backgroundColor: Style.color.white,
        height: '30%',
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0
    },
    DropDownHeaderView: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderBottomWidth: 1,
        borderColor: Style.color.gray,
        paddingHorizontal: 10,
        paddingVertical: 10
    },
    DropDownItemView: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 5,
    },
    DropDownItemLabel: {
        fontSize: Style.fontSize.normal,textAlign:'center',width:'90%',paddingRight:10
    }
});